<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node预测结果</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/NodeInquiryResult.css' %}">
    <script>
        toggleNavbar = function () {
            const navbar = document.getElementById('navbar');
            const mainContent = document.getElementById('main-content');
            const toggleButton = document.getElementById('toggleButton'); // 获取按钮元素

            if (navbar.classList.contains('hidden')) {
                navbar.classList.remove('hidden'); // 显示导航
                mainContent.style.width = '80%'; // 恢复主内容宽度
                toggleButton.innerHTML = '<img  class="button4-icon" src="{% static 'icons/chevron-left.svg' %}" alt="左箭头">'; // 切换按钮文字
            } else {
                navbar.classList.add('hidden'); // 隐藏导航
                mainContent.style.width = '100%'; // 主内容占满整个页面
                toggleButton.innerHTML = '<img  class="button4-icon" src="{% static 'icons/chevron-right.svg' %}" alt="右箭头">'; // 切换按钮文字
            }
        }
    </script>
</head>
<body>

<div class="sidebar" id="navbar">
    <img class="logo" src="{% static 'icons/logo.jpg' %}" alt="logo图标">
    <p class="title">SecTraffic</p>
    <p class="underline"></p>
    <div>
        <a href="{% url 'Node' %}">
            <button class="button1">
                <img class="button1-icon" src="{% static 'icons/graynode.png' %}" alt="节点图标">
                <span> Node----上传数据</span>
            </button>
        </a>
    </div>
    <div>
        <a href="{% url 'NodeInquiry' %}">
            <button class="button1">
                <img class="button1-icon" src="{% static 'icons/graynode.png' %}" alt="节点图标">
                <span> Node----查询预测结果</span>
            </button>
        </a>
    </div>
</div>


<div class="content" id="main-content">
    <p>
        <!-- 点击按钮以隐藏或显示导航 -->
        <button class="button4" onclick="toggleNavbar()" id="toggleButton">
            <img class="button4-icon" src="{% static 'icons/chevron-left.svg' %}" alt="隐藏">
        </button>
    </p>
    {% if prediction_success %}
    <!-- 成功页面 -->
    <div class="prediction-success">
        <img src="{% static 'icons/success-icon.png' %}" alt="成功图标" class="status-icon-success">
        <div class="result-container">
            <div class="result-box">
                <p>速度</p>
                <p>{{ speed }}</p>
            </div>
            <div class="result-box">
                <p>当前节点车辆运行情况</p>
                <p>{{ node_status }}</p>
            </div>
        </div>
        <div class="button-container">
            <button class="back-button" onClick="location.href='/Node/NodeInquiry'">返回上传数据</button>
        </div>
    </div>
    {% else %}
    <!-- 失败页面 -->
    <div class="prediction-failure">
        <img src="{% static 'icons/failure-icon.png' %}" alt="失败图标" class="status-icon-failure">
        <p class="noresult">暂无预测结果</p>
        <div class="button-container">
            <button class="back-button" onClick="location.href='/Node/NodeInquiry'">返回重新上传</button>
        </div>
    </div>
    {% endif %}


</div>
</body>
</html>